<template>
 <div class="col-md-2">
    <div class="panel" :class="getClasses()">
      <div class="panel-heading">
        <h3 class="panel-title"><b>{{title}}</b></h3>
        <br>
        <el-row>
          <el-button @click="poolDetail" icon="el-icon-s-tools" size="mini" circle></el-button>
          <el-button @click="open" icon="el-icon-delete-solid" size="mini" circle></el-button>
        </el-row>
      </div>
      <div class="panel-body">
        <draggable
          class="list-group"
          tag="ul"
          v-model="list"
          v-bind="dragOptions"
          :move="onMove"
          @start="isDragging = true"
          @end="isDragging = false"
          force-fallback="false"
        >
        <!-- false-fallback使得拖拽的同时可以滚动滚轮 -->
          <transition-group type="transition" :name="'flip-list'">
            <taskboard @deleteTask="deleteTask1" @showDetail="detailClick" :list="list" v-for="(element, index) in list" :element="element" :key="element" :color="color"></taskboard>
          </transition-group>
        </draggable>
      </div>
      <div class="panel-footer">
        <a class="btn btn-default btn-block" role="button" @click="addTask">➕</a>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import taskboard from "./TaskBoard";
import draggable from "vuedraggable";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    taskboard,
    draggable
  },
  props: {
    title: String,
    boards: Array,
    editable: Boolean,
    color: String,
    pool: Object
  },
  data() {
    //这里存放数据
    return {
      isDragging: false,
      delayedDragging: false,
      list: this.boards.map((board, index) => {
        return {
          taskId: board.taskId,
          name: board.taskTitle,
          order: board.order,
          key: index + 1,
          fixed: index == 0,
          priority: board.priority,
          startYear: board.startYear,
          startTime: board.startTime,
          deadLineYear: board.deadLineYear,
          deadLineTime: board.deadLineTime,
          descript: board.descript,
          pId: board.pId
        };
      })
    };
  },
  //计算属性 类似于data概念
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost"
      };
    }
  },
  //监控data中的数据变化
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  },
  //方法集合
  methods: {
    // 排序
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order;
      });
    },
    // 任务详情
    detailClick(element) {
      this.$emit('poolClick', element);
    },
    // 任务拖动
    onMove({ draggedContext, relatedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      this.$emit('swap', draggedElement, relatedElement);
      return (
        // (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
        !draggedElement.fixed
      );
    },
    // 获取Classes
    getClasses() {
      return [this.color];
    },
    // 添加任务
    addTask() {
      this.$emit('addTask', this.pool.poolId);
    },
    // 移除任务
    deleteTask1(element) {
      this.$emit('deleteTask1', element);
    },
    // 池子详情
    poolDetail() {
      this.$emit('poolDetail', this.pool);
    },
    // 移除池子
    removePool() {
      this.$emit('removePool', this.pool);
    },
    // 移除池子弹窗
    open() {
      this.$confirm("池子内的任务也会一同删除，是否删除该池子?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.removePool();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 创建完成后按照优先级排序
    this.orderList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>